<script setup>
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { projectListApi } from "@/api";
const router = useRouter();
const route = useRoute();
const props = defineProps({
  val: {
    type: String,
    default: "",
  },
  tit: {
    type: String,
    default: "",
  },
});
const list = ref([]);
const imgs = ref([]);
const active = ref(0);
const getList = () => {
  projectListApi({ project_area_states: props.val }).then((res) => {
    res.items.forEach((item) => {
      const index = list.value.findIndex((li) => li.id == item.project_area_id);
      if (index == -1) {
        list.value.push({
          id: item.project_area_id,
          name: item.project_area_name,
          project: [item],
        });
      } else {
        list.value[index].project.push(item);
      }
    });
    list.value[0]?.project.forEach((item) => {
      imgs.value.push({
        id: item.id,
        img: item.project_image_url_1,
      });
    });
  });
};

const mouseover = (index, { project }) => {
  active.value = index;
  imgs.value = [];
  project.forEach((item) => {
    imgs.value.push({
      id: item.id,
      img: item.project_image_url_1,
    });
  });
};
const toDetails = (id) => {
  const params = {
    path: "/projectDetails",
    query: {
      id,
    },
  };
  router.push(params);
};

onMounted(() => {
  getList();
});
</script>
<template>
  <div class="grid grid-cols-2">
    <div class="first-of-type:border-r border-[#d0b789]">
      <div class="text-default text-xl mb-3">{{ tit }}</div>
      <div class="grid grid-cols-2 gap-5">
        <div
          class="w-full"
          v-for="(item, index) in list"
          :key="'list_' + item.id"
        >
          <div
            class="text-lg mb-2 relative after:absolute after:left-[-8px] after:top-1 after:w-0.5 after:h-[60%]"
            :class="active === index ? 'after:bg-default' : ''"
          >
            {{ item.name }}
          </div>
          <div class="flex flex-col gap-2 items-start">
            <div
              class="text-default hover:text-active cursor-pointer"
              v-for="project in item.project"
              :key="'project_' + project.id"
              @mouseover="mouseover(index, item)"
              @click="toDetails(project.id)"
            >
              {{ project.project_title }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="grid grid-cols-3 items-center gap-2 p-5 pt-0 pb-0">
      <div
        class="w-[100%] pb-[60%] relative"
        v-for="img in imgs"
        :key="'img_' + img.id"
        @click="toDetails(img.id)"
      >
        <img
          class="absolute w-full h-full object-cover"
          :src="img.img"
          alt=""
        />
      </div>
    </div>
  </div>
</template>
